<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script src="/html/util.js"></script>
    <style>
        .error{
            color: red;
            font-size: 12px;
        }
    </style>
    <script>
        window.onload = function (){
            findClass();
        }

        function  findClass(){
            axios.get("/class/findAll",null).then(e=>{
                var info = e.data;
                var str = "";
                for(var i=0;i<info.length;i++){
                    str += `<option value="${info[i].id}">${info[i].name}</option>`;
                }
                $("classSelect").innerHTML = str;
            });
        }

        function add(){
            var params = new FormData();
            params.append("name",$("name").value);
            params.append("phone",$("phone").value);
            params.append("email",$("email").value);
            params.append("grade",$("grade").value);
            params.append("classBean.id",$("classSelect").value);
            //文件表单的表单名，不能和实体类的属性一致。由类型不匹配会导致数据封装失败
            params.append("faceFile ",$("face").files[0]);

            axios.post("/student/add",params,config).then(e =>{
                if(e.data == "ok"){
                    location.href = "/html/index.html";
                }
                else{
                    var info = e.data;
                    for(var i=0;i<info.length;i++){
                        $(info[i].field+"Div").innerHTML = info[i].defaultMessage;
                    }

                }
            });
        }
    </script>
</head>
<body>
    姓名：<input type="text" id="name">
    <div class="error" id="nameDiv"></div>
    电话：<input type="text" id="phone"><br>
    <div class="error" id="phoneDiv"></div>
    email：<input type="text" id="email"><br>
    <div class="error" id="emailDiv"></div>
    成绩：<input type="text" id="grade"><br>
    <div class="error" id="gradeDiv"></div>
    班级：<select id="classSelect"></select><br>
    <img src="" id="faceImg" width="200" height="200"><br>
    头像：<input type="file" id="face"
              onchange="fileChange('face','faceImg')"><br>
    <input type="button" value="提交" onclick="add()">
</body>
</html>